<template>
    <div id="UserRole">
        <el-form>
            <!-- 对角色名称进行查询 -->
            <el-form-item>
                <el-input
                    v-model="usname"
                    style="width: 300px"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入角色名称"
                ></el-input>
                <el-button plain style="margin-left: 1%" @click="sel" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-button plain type="primary" icon="el-icon-plus" @click="tj">添加</el-button>

         <!-- 点击添加弹出 -->
         <el-dialog title="添加角色" :visible.sync="tjdialogFormVisible2">
            <el-form :rules="rules"  :model="roleForm" ref="roleForm" label-width="100px" lcass="demo-ruleForm">
                <el-form-item label="角色名称" prop="roleName" >
                <el-input v-model="roleForm.roleName" placeholder="请输入名称" clearable>
                </el-input>
                </el-form-item>
                <el-form-item label="上级角色" prop="roleID">
                   <el-select placeholder="请选择上级角色" v-model="roleForm.roleID">
                        <el-option
                            v-for="item in tableData"
                            :key="item.roleID"
                            :value="item.roleID"
                            :label="item.roleName"
                        ></el-option>
                   </el-select>
                </el-form-item>
                 <el-form-item label="创建时间" required>
                 <el-date-picker
                    v-model="roleForm.createTime"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="tjdialogFormVisible2 = false">取 消</el-button>               
                <el-button @click="resetForm('roleForm')">重置</el-button>
                <el-button type="primary" @click="Add('roleForm')" >确 定</el-button>
            </div>
        </el-dialog>

        <!-- 循环表-->
        <el-table :data="tableData" border style="width: 100%" 
        row-key="id" default-expand-all>
            <el-table-column fixed prop="roleID"  sortable
            label="角色ID" width="200"> 
            </el-table-column>
            <el-table-column fixed prop="roleName" 
            label="角色名称" width="350"> 
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="350">
                <template slot-scope="scope">
                    <el-button style="margin: 2%" type="primary" plain @click="qx()"
                        ><i class="el-icon-edit"></i>分配权限</el-button
                    >
                    <el-popconfirm title="这是一段内容确定删除吗？">
                        <el-button slot="reference" size="small" type="danger" plain @click="del(scope.row)"
                            ><i class="el-icon-delete"></i>删除</el-button
                        >
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹出权限 -->
        <el-dialog title="权限" :visible.sync="dialogTableVisible">
            <el-table :data="gridData" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column
                fixed
                prop="permissionID"
                label="权限ID"
                width="150">
            </el-table-column>
            <el-table-column
                fixed
                prop="permissionName"
                label="权限名称"
                width="150">
            </el-table-column>
            <el-table-column
                fixed
                prop="stateID"
                label="状态"
                width="200">
            </el-table-column>
                <el-table-column fixed="right" label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button style="margin: 2%" type="primary" plain @click="fpqx(scope.row)"
                            ><i class="el-icon-edit"></i>分配权限</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name: 'UserRole',
    data() {
        return {
            usname: '',
            tjdialogFormVisible2: false,
            dialogTableVisible: false,
            roleForm: {
                roleName:'',
                roleID:'',
                createTime:''
            },
            tableData: [],
            gridData:[],
            rules: {
                roleName: [
                    { required: true, message: '请输入角色', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                roleID: [{ required: true, message: '请选择角色', trigger: 'change' }]
            },
        };
    },
    created(){
       this.show();
    },
    methods: {
        show(){
            axios.get("https://localhost:44328/OA_Permission/GetRoles")
            .then((result)=>{
                this.tableData=result.data
            })
        },
        del(row) {
            console.log(row);
        },
        sel() {
          if(this.usname!=''){
              axios.get('https://localhost:44328/OA_Permission/GetRoles_MoHu?RoleName='+this.usname+'')
            .then((result)=>{
                this.tableData=result.data
            })  
          }else{
              this.show();
          }
        },
        tj() {
            this.tjdialogFormVisible2 = true;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        qx(){
            this.dialogTableVisible = true;
        },
        fpqx() {

        },
        Add(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios.post('https://localhost:44328/OA_Permission/AddUserRole',{
                        roleName:this.roleForm.roleName,
                        parent_RoleID:this.roleForm.roleID,
                        createTime:this.roleForm.createTime
                    })
                    .then((result)=>{
                        if(result.data==1){
                            this.$message({
                            message: '添加角色成功',
                            type: 'success'
                        });
                        this.tjdialogFormVisible2 = false;
                        this.show();
                        }else{
                             this.$message.error('添加失败');
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        edit(){

        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
};
</script>
<style scoped>
</style>